
<template>
	<view class="rider_order_item">
        <div @click="goToPage({
        path:`/riderUser/pages/order-details/order-details`,
        navType:`push`,
        params:{
            orderId:serverData.order_id
        }
    })">

    <div class="rider_title">
                <div class="rider_title_left flex flexAlignItems">
                    <div 
                        class="rider_title_status"
                        :style="tableModuleToggle[serverData.moduleName].style"
                    >
                        {{ tableModuleToggle[serverData.moduleName].name }}
                    </div>
                    <div 
                        class="rider_title_time_box flex flexAlignItems" 
                    >
                        <div class="rider_title_time">
                            {{ serverData.remaining_minutes }}分钟内
                        </div>
                        <div class="rider_title_other">送达</div>
                    </div>
                </div>
                <div class="rider_title_right flex flexAlignItems">
                    <div class="rider_order_money">
                        ￥{{ serverData.rider_get_all_rebate_yuan }}
                    </div>
                </div>
            </div>
            <div class="rider_order_item_content">
                <u-time-line>
                    <u-time-line-item nodeTop="2">
                        <!-- 此处自定义了左边内容，用一个图标替代 -->
                        <template v-slot:node>
                            <div class="u_node">
                                <!-- 此处为uView的icon组件 -->
                                <!-- <uni-icons  type="smallcircle-filled" size="10" color="#eb8433"></uni-icons> -->
                                <div class="u_node_name u_node_name1">
                                    取
                                </div>
                            </div>
                        </template>
                        <template v-slot:content>
                            <view class="node_top1_cont">
                                <view class="u-order-title">{{ serverData.store_info.store_name }}</view>
                                <view class="u-order-desc">{{ serverData.store_info.store_address_info }}</view>
                                <view class="u-order-status" v-if="serverData.moduleName === `runErrand`">
                                    <div 
                                        class="status_box_item" 
                                        v-for="(item,index) in serverData.pack_status_text_list"
                                        :key="index"
                                        :style="`color:${item.textJson.color};border-color:${item.textJson.borderColor}`"
                                    >
                                        {{ item.textJson.text }} * {{item.value}}
                                    </div>
                                </view>
                            </view>
                        </template>
                    </u-time-line-item>
                    <u-time-line-item nodeTop="2">
                        <!-- 此处自定义了左边内容，用一个图标替代 -->
                        <template v-slot:node>
                            <view class="u_node">
                            <!-- 此处为uView的icon组件 -->
                                <!-- <uni-icons  type="smallcircle-filled" size="10" color="#ccc"></uni-icons> -->
                                <div class="u_node_name">
                                    送
                                </div>
                            </view>
                        </template>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-title">{{ serverData.user_address_text }}</view>
                                <view class="u-order-desc user_remark" v-if="serverData.user_remark!==''">
                                    顾客备注：{{ serverData.user_remark }}
                                </view>
                            </view>
                        </template>
                    </u-time-line-item>
                </u-time-line>
            </div>
        </div>

        <div class="rider_order_operate_box">
            <riderActionBar 
                style="width:100%" 
                :serverData="serverData" 
                :key="serverData.current_loca_key"
                :dragBtnStyle="dragBtnStyle"
                :openPopup="openPopup"
            />
        </div>
	</view>
</template>

<script src="./rider-order-item.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './rider-order-item.styl';
</style>
